<template>
  <div>
    <item-list></item-list>
    <div class="body">
      <div class="left"></div>
      <div class="right">        
        <p>查看并管理您收藏的私人音乐</p>
        <p>方便随时随地收听</p>
        <div class="img"></div>
        <div class="button"></div>
      </div>
    </div>
    <foot></foot>
  </div>
</template>

<script>
import ItemList from "@/components/content/smallnav/ItemList";
import Foot from "@/components/content/foot/Foot";

export default {
  components: {
    ItemList,
    Foot
  }
};
</script>

<style scoped>
.body {
  display: flex;
  padding: 130px 120px;

  width: 980px;
  height: 550px;
  margin: 0 auto;
  background-color: #fff;
}

.left {
  width: 375px;
  height: 267px;  
  background: url(~@/assets/img/my.png) 0 0;
}

.right {
  padding: 30px 0 0 60px;
  font-size: 23px;
}

.right p {
  margin-bottom: 10px;
}

.img {
  width: 170px;
  height: 50px;
  margin: 20px 0;
  background: url(~@/assets/img/my.png) -478px -127px;
}

.button {
  width: 167px;
  height: 44px;
  background: url(~@/assets/img/my.png) -482px -202px;
  cursor: pointer;
}
.button:hover {
  background-position: 0 -278px;
}

</style>